<template>
    <div class="selling-project-cost">
        <div class="title-box">
            <span class="s-tit">{{ title }}</span>
        </div>
        <div class="cost-box comm-list">
            <div class="cost-row" v-for="item in list" :key="item.id">
                <div class="che-box">
                    <el-checkbox
                        v-model="item.value"
                        true-label="1"
                        false-label="0"
                        @change="checkboxFun(item, $event)"
                        >{{ item.title }}</el-checkbox
                    >
                </div>
                <div class="duf-box" @click="setbutFun(item)">
                    <span class="duf" v-show="item.is_buf == 1"
                        >默认有效期</span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import goodsCtrl from "../../js/project/GoodsCtrl.js";
import config from "../../js/conf/Config.js";

export default {
    props: ["title"],
    name: "termOfValidity",
    data() {
        return {
            checked: false,
            list: [],
            outday_ids: [],
            outday_i: "",
        };
    },
    methods: {
        initData() {
            this.getcostList();
        },
        checkboxFun(item, val) {
            this.outday_ids = [];
            let bool = this.list.some((v) => {
                return v.is_buf == 1;
            });
            if (val == 1) {
                if (!bool) {
                    item.is_buf = "1";
                    this.outday_i = item.id;
                }
            } else {
                if (item.is_buf == 1) {
                    item.is_buf = "0";
                }
            }

            this.list.map((v) => {
                if (v.value == 1) {
                    this.outday_ids.push(v.id);
                }
            });
            this.setDerData();
        },
        setbutFun(item) {
            if (item.value == 0) return;
            this.list.map((v) => {
                if (v.id == item.id) {
                    v.is_buf = "1";
                    this.outday_i = v.id;
                } else {
                    v.is_buf = "0";
                }
            });
            this.setDerData();
        },
        setDerData() {
            goodsCtrl.setDerData("outday_i", this.outday_i);
            goodsCtrl.setDerData("outday_ids", this.outday_ids);
        },
        async getcostList() {
            let url = config.PROPRE_OUTDAY_LS;
            let param = {
                status: "1",
            };
            let res = await this.$api({ url: url, data: param });
            if (res.data && res.data.outday_ls) {
                res.data.outday_ls.map((v) => {
                    v.value = "0";
                    v.is_buf = "0";
                });
                this.list = res.data.outday_ls || [];
                this.outday_ids = goodsCtrl.getDatacom("outday_ids") || [];
                this.outday_i = goodsCtrl.getDatacom("outday_i") || "";
                if (this.outday_ids.length > 0) {
                    this.outday_ids.map((v) => {
                        this.list.map((vs) => {
                            if (v == vs.id) {
                                vs.value = "1";
                            }
                            if (vs.id == this.outday_i) {
                                vs.is_buf = "1";
                            }
                        });
                    });
                }
            } else {
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.selling-project-cost {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 13px;
    .title-box {
        margin-bottom: 10px;
        font-weight: bold;
    }
    .cost-box {
        width: 655px;
        // height: 300px;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        .cost-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px #3989fc solid;
            border-radius: 5px;
            margin-bottom: 10px;
            margin-right: 10px;
            height: 38px;
            min-width: 200px;

            .che-box {
                padding: 10px;
            }
            .duf-box {
                width: 70%;
                text-align: right;
                height: 35px;
                line-height: 35px;
                padding-right: 10px;
                cursor: pointer;
                .duf {
                    color: #3989fc;
                }
            }
        }
    }
}
</style>